 <template>
  <div class="order-management">
    <div class="page-header">
      <h1>订单管理</h1>
      <p>管理系统中的所有订单信息</p>
    </div>

    <div class="content-card">
      <div class="toolbar">
        <div class="search-section">
          <input 
            type="text" 
            v-model="searchOrderId" 
            placeholder="输入订单号查询"
            class="search-input"
          >
          <button class="btn btn-search" @click="searchOrder">查询</button>
        </div>
      </div>

      <div class="table-container">
        <table class="order-table">
          <thead>
            <tr>
              <th>订单号</th>
              <th>用户ID</th>
              <th>订单金额</th>
              <th>支付方式</th>
              <th>订单状态</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in orders" :key="order.orderId">
              <td>{{ order.orderId }}</td>
              <td>{{ order.userId }}</td>
              <td>¥{{ order.orderTotal }}</td>
              <td>{{ getPaymentMethodText(order.paymentType) }}</td>
              <td>
                <span :class="['status', getStatusClass(order.orderStatus)]">
                  {{ getOrderStatusText(order.orderStatus) }}
                </span>
              </td>
              <td>{{ formatDate(order.createTime) }}</td>
              <td>
                <button class="btn btn-view" @click="viewOrderDetail(order)">查看详情</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 订单详情模态框 -->
    <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
      <div class="modal-content large" @click.stop>
        <div class="modal-header">
          <h3>订单详情 - {{ selectedOrder?.orderId }}</h3>
          <button class="close-btn" @click="closeDetailModal">&times;</button>
        </div>
        <div class="modal-body">
          <div v-if="selectedOrder" class="order-detail">
            <div class="detail-section">
              <h4>订单信息</h4>
              <div class="detail-grid">
                <div class="detail-item">
                  <label>订单号:</label>
                  <span>{{ selectedOrder.orderId }}</span>
                </div>
                <div class="detail-item">
                  <label>用户ID:</label>
                  <span>{{ selectedOrder.userId }}</span>
                </div>
                <div class="detail-item">
                  <label>订单金额:</label>
                  <span>¥{{ selectedOrder.orderTotal }}</span>
                </div>
                <div class="detail-item">
                  <label>支付方式:</label>
                  <span>{{ getPaymentMethodText(selectedOrder.paymentType) }}</span>
                </div>
                <div class="detail-item">
                  <label>订单状态:</label>
                  <span :class="['status', getStatusClass(selectedOrder.orderStatus)]">
                    {{ getOrderStatusText(selectedOrder.orderStatus) }}
                  </span>
                </div>
                <div class="detail-item">
                  <label>创建时间:</label>
                  <span>{{ formatDate(selectedOrder.createTime) }}</span>
                </div>
                <div class="detail-item">
                  <label>更新时间:</label>
                  <span>{{ formatDate(selectedOrder.updateTime) }}</span>
                </div>
              </div>
            </div>

            <div class="detail-section">
              <h4>收货信息</h4>
              <div class="detail-grid">
                <div class="detail-item">
                  <label>收货人:</label>
                  <span>{{ selectedOrder.receiverName }}</span>
                </div>
                <div class="detail-item">
                  <label>联系电话:</label>
                  <span>{{ selectedOrder.receiverPhone }}</span>
                </div>
                <div class="detail-item full-width">
                  <label>收货地址:</label>
                  <span>
                    {{ (selectedOrder.receiverProvince || '') + (selectedOrder.receiverCity || '') + (selectedOrder.receiverDistrict || '') + (selectedOrder.receiverAddress || '') }}
                  </span>
                </div>
              </div>
            </div>

            <div class="detail-section">
              <h4>商品详情</h4>
              <div class="order-items">
                <div v-for="item in orderDetails" :key="item.detailId" class="order-item">
                  <div class="item-info">
                    <img :src="item.productImg || '/src/assets/product-default.png'" :alt="item.productName" class="item-img">
                    <div class="item-details">
                      <h5>{{ item.productName }}</h5>
                      <p class="item-spec">{{ item.specification || '默认规格' }}</p>
                    </div>
                  </div>
                  <div class="item-price">
                    <span class="price">¥{{ item.sellingPrice }}</span>
                    <span class="quantity">x{{ item.quantity }}</span>
                  </div>
                  <div class="item-total">
                    ¥{{ (item.sellingPrice * item.quantity).toFixed(2) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllOrders, getOrderById, getOrderDetails } from '@/api/admin';

export default {
  name: 'OrderManagement',
  data() {
    return {
      orders: [],
      searchOrderId: '',
      showDetailModal: false,
      selectedOrder: null,
      orderDetails: [],
      loading: false
    }
  },
  mounted() {
    this.fetchOrders();
  },
  methods: {
    async fetchOrders() {
      try {
        this.loading = true;
        const response = await getAllOrders();
        this.orders = response || [];
      } catch (error) {
        console.error('获取订单列表失败:', error);
        alert('获取订单列表失败');
      } finally {
        this.loading = false;
      }
    },
    async searchOrder() {
      if (!this.searchOrderId.trim()) {
        this.fetchOrders();
        return;
      }
      
      try {
        const response = await getOrderById(this.searchOrderId);
        if (response) {
          this.orders = [response];
        } else {
          this.orders = [];
          alert('未找到该订单');
        }
      } catch (error) {
        console.error('查询订单失败:', error);
        alert('查询订单失败');
      }
    },
    async viewOrderDetail(order) {
      try {
        const detailOrder = await getOrderById(order.orderId);
        this.selectedOrder = detailOrder;
        const details = await getOrderDetails(order.orderId);
        this.orderDetails = details || [];
        this.showDetailModal = true;
      } catch (error) {
        console.error('获取订单详情失败:', error);
        alert('获取订单详情失败');
      }
    },
    closeDetailModal() {
      this.showDetailModal = false;
      this.selectedOrder = null;
      this.orderDetails = [];
    },
    getOrderStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '已支付',
        2: '已发货',
        3: '已完成',
        4: '已取消'
      };
      return statusMap[status] || '未知状态';
    },
    getStatusClass(status) {
      const classMap = {
        0: 'pending',
        1: 'paid',
        2: 'shipped',
        3: 'completed',
        4: 'cancelled'
      };
      return classMap[status] || 'unknown';
    },
    getPaymentMethodText(paymentType) {
      const paymentMap = {
        1: '支付宝',
        2: '微信支付',
        3: '银行卡'
      };
      return paymentMap[paymentType] || '未知';
    },
    formatDate(dateString) {
      if (!dateString) return '-';
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN');
    }
  }
}
</script>

<style scoped>
.order-management {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 2rem;
}

.page-header p {
  margin: 0;
  color: #7f8c8d;
}

.content-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #ecf0f1;
}

.search-section {
  display: flex;
  gap: 10px;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 300px;
}

.table-container {
  overflow-x: auto;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
}

.order-table th,
.order-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ecf0f1;
}

.order-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
}

.order-table tr:hover {
  background-color: #f8f9fa;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
}

.status.pending {
  background-color: #fff3cd;
  color: #856404;
}

.status.paid {
  background-color: #d1ecf1;
  color: #0c5460;
}

.status.shipped {
  background-color: #d4edda;
  color: #155724;
}

.status.completed {
  background-color: #d1ecf1;
  color: #0c5460;
}

.status.cancelled {
  background-color: #f8d7da;
  color: #721c24;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  margin-right: 5px;
  transition: all 0.3s ease;
}

.btn-search {
  background-color: #27ae60;
  color: white;
}

.btn-search:hover {
  background-color: #229954;
}

.btn-view {
  background-color: #3498db;
  color: white;
}

.btn-view:hover {
  background-color: #2980b9;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content.large {
  max-width: 1000px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #ecf0f1;
}

.modal-header h3 {
  margin: 0;
  color: #2c3e50;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #7f8c8d;
}

.modal-body {
  padding: 20px;
}

.detail-section {
  margin-bottom: 30px;
}

.detail-section h4 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 1.1rem;
  border-bottom: 2px solid #ecf0f1;
  padding-bottom: 5px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-item.full-width {
  grid-column: 1 / -1;
}

.detail-item label {
  font-weight: 600;
  color: #7f8c8d;
  margin-bottom: 5px;
  font-size: 0.875rem;
}

.detail-item span {
  color: #2c3e50;
}

.order-items {
  border: 1px solid #ecf0f1;
  border-radius: 4px;
}

.order-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ecf0f1;
}

.order-item:last-child {
  border-bottom: none;
}

.item-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.item-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 15px;
}

.item-details h5 {
  margin: 0 0 5px 0;
  color: #2c3e50;
}

.item-spec {
  margin: 0;
  color: #7f8c8d;
  font-size: 0.875rem;
}

.item-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
}

.price {
  font-weight: 600;
  color: #e74c3c;
}

.quantity {
  color: #7f8c8d;
  font-size: 0.875rem;
}

.item-total {
  font-weight: 600;
  color: #2c3e50;
  min-width: 80px;
  text-align: right;
}
</style>